<template>
	<div class="search">
		<div class="search-input">
			<search-input 
				ref="searchInput" 
				:query="query" 
				@query="queryChange"
				@blur.native.capture="listBlur"
			>
			</search-input>
		</div>
		<!-- 查找结果 -->
		<div class="search-result" v-show="query" ref="searchResult">
			<suggest ref="suggest" @select="saveSearch" :query="query"></suggest>
		</div>
		<Scroll class="scroll" ref="scroll">
			<div class="scroll-box">
				<!-- 热门搜索 -->
				<div class="hotkey">
					<h1 class="hotkey-title">热门搜索</h1>
					<span class="hotkey-content" v-for="(item, index) in hotkey" :key="index" @click="hotkeyClick(item)">
						{{item.k}}
					</span>
				</div>
				<!-- 搜索历史 -->
				<div class="history">
					<h1 class="history-title" v-show="searchHistory.length">搜索历史<img src="@/assets/img/icon-dels.png" alt="" @click="historyClear"></h1>
					<historyList @select="historyKeyClick" :searchList="searchHistory"></historyList>
				</div>
			</div>
		</Scroll>
		
		<!-- 详情子路由 -->
		<router-view></router-view>

	</div>
</template>

<script>
import searchInput from 'base/searchinput/searchInput'
import Scroll from 'base/scroll/Scroll'
import historyList from 'base/historylist/historyList'
import suggest from 'components/suggest/Suggest'
import { ERR_OK } from 'api/config'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getHotKey } from 'api/search'

export default {
	components: {
		searchInput,
		Scroll,
		historyList,
		suggest
	},
	data() {
		return {
			hotkey: [],
			query: ''
		}
	},
	created() {
		this._getHostKey()
	},
	methods: {
		_getHostKey() {
			getHotKey().then(res => {
				if (res.code === ERR_OK) {
					this.hotkey = res.data.hotkey.slice(0,10)
				}
			})
		},
		queryChange(query) {
			this.query = query
		},
		hotkeyClick(item) {
			this.$refs.searchInput.setQuery(item.k.replace(/\s+/,''))
			// console.log(this.searchHistory)
		},
		// 搜索框失去焦点
		listBlur() {
			this.$refs.searchInput.blur()
		},
		// 保存搜索记录
		saveSearch() {
			this.saveSearchHistory(this.query)
		},
		// 清空历史记录
		historyClear() {
			this.clearSearchHistory()
		},
		// 点击历史记录
		historyKeyClick(item) {
			this.$refs.searchInput.setQuery(item.replace(/\s+/,''))
		},
		// 更新历史记录页的scroll
		updateScroll() {
			this.$refs.scroll.refresh()
		},
		...mapMutations({
      setTopList: "SET_TOP_LIST"
    }),
    ...mapActions(["saveSearchHistory", "clearSearchHistory"])
	},
	computed: {
    ...mapGetters(["searchHistory"])
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.search-input {
  margin-top: rem(20);
	margin-bottom: rem(30);
  padding: 0 rem(20);
  box-sizing: border-box;
}
.hotkey {
  width: 100%;
  min-height: rem(136);
  max-height: rem(220);
  overflow: hidden;
  padding: 0 rem(20);
	margin-bottom: rem(20);
  box-sizing: border-box;
}
.history {
  width: 100%;
  padding: 0 rem(20);
  box-sizing: border-box;
}
.hotkey .hotkey-title,
.history .history-title {
	margin-bottom: rem(20);
  color: rgba(255, 255, 255, 0.5);
  font-size: rem(15);
}
.hotkey .hotkey-content {
	display: inline-block;
  padding: rem(5) rem(10);
	margin-bottom: rem(10);
  margin-right: rem(20);
  background: rgb(51, 51, 51);
  border-radius: rem(6);
  font-size: rem(14);
  color: rgba(255, 255, 255, 0.3);
}
.history-title img {
  width: rem(18);
  height: rem(18);
  float: right;
}
.scroll {
  width: 100%;
  height: 73vh;
  overflow: hidden;
}
.scroll .scroll-box {
  padding-bottom: rem(50);
}
</style>